<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" media="screen" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="../../layui/css/layui.css">
</head>
<body>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <form class="form-horizontal" onsubmit="return false" id="form">
        <fieldset>
            <input type="hidden" id="id" name="id">
            <div class='form-group'>
                <label class='col-md-2 control-label'>标题</label>
                <div class='col-md-10'>
                    <input class='form-control' placeholder='title' type='text' name='title' id='title'
                           data-bv-notempty='true' data-bv-notempty-message='title 不能为空'>
                </div>
            </div>

            <div class='form-group'>
                <label class='col-md-2 control-label'>标题图片(最多3个)</label>
                <div class='col-md-10'>
                    <button type="button" class="layui-btn" id="multiple_img_upload">
                        <i class="layui-icon">&#xe67c;</i>上传图片
                    </button>
                </div>

            </div>
            <div class='form-group'>
                <label class='col-md-2 control-label'>预览</label>
                <div class='col-md-10'>
                    <div class="layui-upload-list" id="div-slide_show"></div>
                </div>
            </div>

            <div class='form-group'>
                <label class='col-md-2 control-label'>类型</label>
                <div class='col-md-10'>
                    <select name="type" class="form-control input-sm" id="type">
                    </select>
                </div>
            </div>


            <div class="form-group">
                <label class="col-md-2 control-label">内容</label>
                <div class="col-md-10">
					<textarea class="layui-textarea" id="content" name="content" style="display: none">
					</textarea>
                </div>
            </div>




            <input type="hidden" name="imageUrl" id="imageUrl" value="">


            <div class="form-actions">
                <div class="row" align="center">
                    <div class="col-md-12">
                        <button class="btn btn-primary" onclick="location.href='mfflInformationList.html'">返回</button>
                        <button class="btn btn-primary" id="save" type="submit" onclick="update()">
                            <i class="fa fa-save"></i> 保存
                        </button>
                    </div>
                </div>
            </div>

        </fieldset>
    </form>
</div>
<script type="text/javascript" src="../../js/libs/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../../js/jq.js"></script>
<script type="text/javascript" src="../../js/plugin/bootstrapvalidator/bootstrapValidator.min.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script type="text/javascript" src="../../layui/layui.js"></script>
<script type="text/javascript" src="../../js/dict.js"></script>
<script type="text/javascript">
    layui.use(['layer', 'laydate'], function () {
        var layer = layui.layer;
    });

    var multiple_images = [];
    initData();

    function initData() {
        var id = getUrlParam("id");
        if (id != "") {
            $.ajax({
                type: 'get',
                url: '/mfflInformations/' + id,
                async: false,
                success: function (data) {
                    $('#id').val(data.id);
                    $('#title').val(data.title);

                    $('#content').val(data.content);

                    if (data.imageUrl != "" ){
                    var image = data.imageUrl.split(";");
                        for (var i = 0; i < image.length; i++) {
                            multiple_images.push(image[i]);
                            $('#div-slide_show').append('<img src="/statics' + image[i] + '"  title="点击删除" height="120" width="120" class="layui-upload-img" onclick="delMultipleImgs(this)">')
                        }
                    }
                    $('#imageUrl').val(multiple_images);


                    // var advertisingType = '';
                    // advertisingType += '<option value="0" ' + (data.serviceType == '0' ? 'selected' : '') + ' >用户端</option>';
                    // advertisingType += '<option value="1" ' + (data.serviceType == '1' ? 'selected' : '') + ' >律师端</option>';
                    // $('#advertisingType').html(advertisingType);
                    var type = data.type;

                    $.ajax({
                        type: 'get',
                        url: '/mfflTypes/adminGetInformationType',
                        async: false,
                        success: function (data) {
                            var str = '';
                            for (var i = 0; i < data.length; i++) {
                                str += '<option value="' + data[i].id + '" ' + (data[i].id == type ? 'selected' : '') + '>' + data[i].name + '</option>';
                            }
                            $('#type').html(str);
                        }
                    });



                }
            });
        }
    }


    layui.use('upload', function () {
        var upload = layui.upload;
        //多图片上传
        upload.render({
            elem: '#multiple_img_upload'
            , url: '/mffl/uploadimagefile'
            , multiple: true

            , done: function (res) {
                //如果上传成功
                if (res.errCode == 200) {

                    $('#div-slide_show').append('<img src="/statics' + res.datas.max + '"  title="点击删除" height="120" width="120" class="layui-upload-img" onclick="delMultipleImgs(this)">')
                    //追加图片成功追加文件名至图片容器
                    multiple_images.push(res.datas.max);
                    $('#imageUrl').val(multiple_images);
                } else {
                    //提示信息
                    layer.msg(res.message);
                }
            }
        });

    });


    //单击图片删除图片 【注册全局函数】
    function delMultipleImgs(this_img) {
        //获取下标
        var subscript = $("#div-slide_show img").index(this_img);
        //删除图片
        this_img.remove();
        //删除数组
        multiple_images.splice(subscript, 1);
        //重新排序
        multiple_images.sort();
        $('#imageUrl').val(multiple_images);
        document.getElementById("save").removeAttribute("disabled");
        return;
    }


    var pro = window.location.protocol;
    var host = window.location.host;
    var domain = pro + "//" + host;

    var layedit, index;
    layui.use('layedit', function () {
        layedit = layui.layedit;
        layedit.set({
            uploadImage: {
                url: '/files/layui?domain=' + domain + "&token=" + localStorage.getItem("token"),
                type: 'post'
            }
        });
        index = layedit.build('content');
    });


    function update() {
        $('#form').bootstrapValidator();
        var bootstrapValidator = $("#form").data('bootstrapValidator');
        bootstrapValidator.validate();
        if (!bootstrapValidator.isValid()) {
            return;
        }
        console.log(layedit.getContent(index));
        var formdata = $("#form").serializeObject();
        formdata.content = layedit.getContent(index);
        var img = formdata.imageUrl.split(",");
        if (img.length > 3 ){
            layer.msg("最多上传3张图片");
            return;
        }

        $.ajax({
            type: 'put',
            url: '/mfflInformations',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(formdata),
            success: function (data) {
                layer.msg("修改成功", {shift: -1, time: 1000}, function () {
                    location.href = "mfflInformationList.html";
                });
            }
        });
    }

</script>
</body>
</html>
